<template>
  <m-page>
    <!-- 融易通卡激活页 -->
    <m-header title="融易通卡激活"></m-header>
    <!-- 激活录入信息 -->
      <div class="activated_information">
        <ynet-input-item ref="input0" title="融易通卡号" value="6214 **** **** 1234" readonly></ynet-input-item>
        <!-- 输入cvv2 -->
        <ynet-input-item
          ref="input1"
          title="CVV2"
          placeholder="请输入卡片背面签名栏末尾三位数"
          is-amount
          v-model="formdata.cvv2"
        ></ynet-input-item>
        <!-- 输入手机号 -->
        <ynet-input-item
          ref="input2"
          title="预留手机号"
          type="phone"
          placeholder="请输入申请卡片时预留手机号"
          is-amount
          v-model="formdata.tel"
        ></ynet-input-item>

        <!-- 短信验证码 -->
        <ynet-input-item
          title="验证码"
          ref="myInputItem"
          placeholder="请输入验证码"
          clearable
          v-model="formdata.checkCode"
        >
          <template v-slot:right>
            <div class="md-message-code-get">
              <p v-show="!starting" @click="$_onStart">获取验证码</p>
              <p v-show="starting">
                <span>{{localTime | formatTime}}</span>秒后再获取
              </p>
            </div>
          </template>
        </ynet-input-item>
        <div
          class="md-message-code-brief"
          v-show="starting && !localError"
        >验证码已发送至{{this.formdata.tel}},3分钟内有效</div>
        <div class="md-message-code-error">{{localError}}</div>
      </div>
      <ynet-button type="primary" @click="handclick" v-if="isNext == '1'">下一步</ynet-button>
      <ynet-button type="disabled" v-if="isNext == '0'">下一步</ynet-button>    
  </m-page>
</template>

<script>
import { InputItem, NumberKeyboard ,Button, MessageCode } from "ynet-mobile";
export default {
  components: {
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [MessageCode.name]: MessageCode,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  data() {
    return {
      isKeyBoardShow: false,
      starting: false, //获取验证码文字显示
      formdata: {
        cvv2: "", //cvv2
        tel: "", //手机号
        checkCode: "" //验证码
      },
      localTime: 30,
      localError: "", //验证码错误信息
      isNext: "1", //下一步按钮是否可用  0 信息不全不可用按钮  1 按钮可用
    };
  },
  filters: {
    formatTime(t) {
      return t < 10 ? `0${t}` : t;
    }
  },
  created() {},
  mounted() {},
  methods: {
    //页面跳转
    goto(item, params) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`
      app.api.pushWindow( url ,params )
    },
    // 点击下一步按钮 进入设置交易密码页
    handclick() {
      this.goto('home_set_pay_password.html')
    },
    //获取验证码
    $_onStart() {
      if (this.starting) return;
      this.starting = true;
      this.$_onCountDown();

      //这里是模拟rpc发请求到后台申请下发验证码，需改造
      setTimeout(() => {
        let createRandom = () =>
          String(Math.floor(Math.random() * (999999 - 100000 + 1) + 100000));
        this.localCode = createRandom();
      }, 2500);
    },
    // 验证码获取倒计时
    $_onCountDown() {
      this.timer = setInterval(() => {
        if (this.localTime <= 0) {
          this.$_onStop();
        } else {
          this.localTime = this.localTime - 1;
        }
      }, 1000);
    },
    $_onStop() {
      clearInterval(this.timer);
      this.localTime = this.time;
      this.starting = false;
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

